<template>
    <div class="main">
        <div style="flex: 3; display: flex; flex-direction: column; gap: 30px">
            <div class="fengqi">
                <h3>客户资料/{{ formData.name }}</h3>
                <div class="input-grid">
                    <div class="input-item">
                        <label for="input-1">客户姓名</label>
                        <el-input
                            v-model="formData.name"
                            :disabled="isReadOnly"
                            placeholder="请输入客户姓名"
                        />
                    </div>
                    <div class="input-item">
                        <label for="input-2">电话号码</label>
                        <el-input
                            type="text"
                            v-model="formData.phone"
                            :disabled="isReadOnly"
                            placeholder="请输入电话号码"
                        />
                    </div>
                    <div class="input-item">
                        <label for="input-12">职业</label>
                        <el-select
                            v-model="formData.occupation"
                            placeholder="请选择职业"
                            :disabled="isReadOnly"
                        >
                            <el-option
                                v-for="occupation in occupations"
                                :key="occupation"
                                :value="occupation"
                                >{{ occupation }}</el-option
                            >
                        </el-select>
                    </div>
                    <div class="input-item">
                        <label for="input-12">学历</label>
                        <el-select
                            v-model="formData.education"
                            placeholder="请选择学历"
                            :disabled="isReadOnly"
                        >
                            <el-option v-for="education in educations" :key="education" :value="education">{{
                                education
                            }}</el-option>
                        </el-select>
                    </div>
                    <div class="input-item">
                        <label for="input-4">所在地区</label>
                        <el-cascader
                            v-model="label"
                            :options="options"
                            :props="cascaderProps"
                            :disabled="isReadOnly"
                            @change="handleChange"
                            style="display: block; flex: 1"
                        />
                    </div>
                    <div class="input-item">
                        <label for="input-5">微信号码</label>
                        <el-input
                            type="text"
                            v-model="formData.weixin"
                            placeholder="请输入微信号码"
                            :disabled="isReadOnly"
                        />
                    </div>
                    <div class="input-item">
                        <label for="input-6">年龄</label>
                        <el-input
                            type="text"
                            v-model="formData.age"
                            placeholder="请输入年龄"
                            :disabled="isReadOnly"
                        />
                    </div>
                    <div class="input-item">
                        <label for="input-7">QQ</label>
                        <el-input
                            type="text"
                            v-model="formData.qq"
                            placeholder="请输入QQ号码"
                            :disabled="isReadOnly"
                        />
                    </div>
                    <div class="input-item">
                        <label for="input-8">性别</label>
                        <el-select v-model="formData.gender" placeholder="请选择性别" :disabled="isReadOnly">
                            <el-option label="男" :value="0"></el-option>
                            <el-option label="女" :value="1"></el-option>
                            <el-option label="未知" :value="2"></el-option>
                        </el-select>
                    </div>
                    <div class="input-item">
                        <label for="input-9">身高</label>
                        <el-input
                            type="text"
                            v-model="formData.height"
                            placeholder="请输入身高"
                            :disabled="isReadOnly"
                        />
                    </div>
                    <div class="input-item">
                        <label for="input-10">体重</label>
                        <el-input
                            type="text"
                            v-model="formData.weight"
                            placeholder="请输入体重"
                            :disabled="isReadOnly"
                        />
                    </div>
                    <div class="input-item">
                        <label for="input-11">备注</label>
                        <el-input
                            type="text"
                            v-model="formData.remark"
                            placeholder="请输入备注"
                            :disabled="isReadOnly"
                        />
                    </div>
                </div>
            </div>
            <div class="fengqi">
                <h3>客户意向</h3>
                <div class="input-grid">
                    <div class="input-item">
                        <label for="input-1">意向类型</label>
                        <el-select
                            v-model="formData.subject"
                            placeholder="请选择意向类型"
                            @change="handleSubjectChange"
                            :disabled="isReadOnly"
                        >
                            <el-option label="舞蹈类" :value="1"></el-option>
                            <el-option label="游泳类" :value="2"></el-option>
                            <el-option label="拳击类" :value="3"></el-option>
                        </el-select>
                    </div>
                    <div class="input-item">
                        <label for="input-2">意向课程</label>
                        <el-select
                            v-model="formData.courseId"
                            placeholder="请选择意向课程"
                            :disabled="isReadOnly"
                        >
                            <el-option
                                v-for="item in list"
                                :key="item.courseId"
                                :value="item.courseId"
                                :label="item.name"
                            />
                        </el-select>
                    </div>
                    <div class="input-item">
                        <label for="input-12">健身原因</label>
                        <el-input
                            type="text"
                            v-model="formData.reason"
                            placeholder="请输入健身原因"
                            :disabled="isReadOnly"
                        />
                    </div>
                    <div class="input-item">
                        <label for="input-12">每周健身时间</label>
                        <el-input
                            type="text"
                            v-model="formData.hours"
                            placeholder="请输入每周健身时间"
                            :disabled="isReadOnly"
                        />
                    </div>
                    <div class="input-item">
                        <label for="input-4">意向金额</label>
                        <el-input
                            type="text"
                            v-model="formData.money"
                            placeholder="请输入意向金额"
                            :disabled="isReadOnly"
                        />
                    </div>
                    <div class="input-item">
                        <label for="input-5">其他意向</label>
                        <el-input
                            type="text"
                            v-model="formData.otherIntention"
                            placeholder="请输入其他意向"
                            :disabled="isReadOnly"
                        />
                    </div>
                </div>
            </div>
            <div class="fengqi">
                <h3>沟通记录</h3>
                <div class="input-grid">
                    <div class="input-item">
                        <label for="input-1">跟进状态</label>
                        <el-select
                            v-model="formData.status"
                            placeholder="请选择跟进状态"
                            :disabled="isReadOnly"
                        >
                            <el-option :value="0" label="已分配"></el-option>
                            <el-option :value="1" label="进行中"></el-option>
                            <el-option :value="2" label="回收"></el-option>
                            <el-option :value="3" label="未知状态"></el-option>
                        </el-select>
                    </div>
                    <div class="input-item">
                        <label for="input-2">下次跟进时间</label>
                        <el-date-picker
                            v-model="formData.nextTime"
                            type="datetime"
                            placeholder="请选择下次跟进时间"
                            :disabled="isReadOnly"
                            style="display: block; flex: 1"
                        />
                    </div>
                    <div class="input-item">
                        <label for="input-12">沟通重点</label>
                        <el-select
                            v-model="formlist.record1"
                            placeholder="请选择沟通重点"
                            :disabled="isReadOnly"
                        >
                            <el-option value="课程">课程</el-option>
                            <el-option value="价格">价格</el-option>
                            <el-option value="位置">位置</el-option>
                            <el-option value="时间">时间</el-option>
                            <el-option value="教练">教练</el-option>
                            <el-option value="环境">环境</el-option>
                        </el-select>
                    </div>
                    <div class="input-item">
                        <label for="input-12">沟通纪要</label>
                        <el-input
                            type="text"
                            v-model="formlist.record2"
                            placeholder="请输入沟通纪要"
                            :disabled="isReadOnly"
                        />
                    </div>
                </div>
                <div style="text-align: right; padding: 0 20px 20px">
                    <el-button type="primary" icon="Search" @click="goback">返回</el-button>
                    <el-button icon="Refresh" :disabled="isReadOnly" @click="getCourseType">保存</el-button>
                    <el-button icon="Refresh" :disabled="isReadOnly" @click="goback">转交成为客户</el-button>
                </div>
            </div>
        </div>
        <div class="fengqi" style="flex: 1">
            <h3>商品跟进记录</h3>
            <div v-for="(item, index) in listall" :key="index" class="item-container">
                <div class="item-content">
                    <div class="create-by">{{ item.createBy }}：</div>
                    <div class="info">{{ item.info }}</div>
                </div>
                <div class="create-time">{{ item.createTime }}</div>
            </div>
        </div>
    </div>
</template>
<script lang="ts" setup>
import { ref, onMounted, computed } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { business, courseList, courseType, baocun, type } from '@/api/system/business';
import { ElMessage } from 'element-plus';

const label = ref<string[]>(['', '', '']);
const cascaderProps = {
    value: 'label', // 指定 value 字段
    label: 'label', // 指定 label 字段
};

const handleChange = (value: any) => {
    console.log(value);
    formData.value.area = value[0];
    formData.value.city = value[1];
    formData.value.province = value[2];
};

import maps from '@/assets/map.json';
const options = maps;
const route = useRoute();
const listall = ref<FormInstance>();
const formlist = ref<FormData>({
    record1: '',
    record2: '',
});
const formData = ref<FormData>({
    name: '',
    phone: '',
    occupation: '',
    education: '',
    area: '',
    weixin: '',
    age: '',
    qq: '',
    gender: 2,
    height: '',
    weight: '',
    remark: '',
    subject: 0,
    courseId: '',
    reason: '',
    hours: '',
    money: '',
    otherIntention: '',
    status: 0,
    nextTime: '',
});

const list = ref<{ courseId: string; name: string }[]>([]);

// 职业和学历选项
const occupations = ['无', '技术', '产品', '设计', '运营', '市场', '销售'];
const educations = ['小学', '初中', '高中', '中专', '大专', '本科', '研究生', '博士', '其他'];

const isReadOnly = computed(() => {
    return route.query.action === undefined;
});

onMounted(() => {
    const id = route.params.id;
    if (id) {
        business(id).then(res => {
            const data = res.data;
            formData.value = data;
            handleSubjectChange(data.subject);
            label.value = [data.province, data.city, data.area];
        });
        type(id).then(res => {
            console.log(res.data);
            listall.value = res.data;
        });
    } else {
        handleSubjectChange(formData.value.subject);
    }
});

// 获取课程列表
function fetchCourses(subject: number) {
    if (subject) {
        return courseType(subject);
    } else {
        return courseList();
    }
}

// 处理意向类型变化
function handleSubjectChange(subject: number) {
    fetchCourses(subject).then(res => {
        list.value = res.data.map(item => ({
            courseId: item.courseId,
            name: item.name,
        }));
    });
}
const router = useRouter();
// 保存表单数据
function getCourseType() {
    if (!formlist.value.record1 && !formlist.value.record2) {
        ElMessage({
            message: '沟通重点和沟通纪要不能为空！',
            type: 'warning',
        });
    } else {
        baocun({
            ...formData.value,
            address: [],
            record1: formlist.value.record1,
            record2: formlist.value.record2,
            info: `【${formlist.value.record1}】${formlist.value.record2}`,
        }).then(res => {
            console.log(res);
            goback();
            formlist.value.record1 = '';
            formlist.value.record2 = '';
        });
    }
}
function goback() {
    router.back();
}
</script>

<style scoped lang="scss">
.main {
    width: 100%;
    display: flex;
    gap: 20px;
    padding: 20px 0;
    .fengqi {
        background-color: #fff;
        box-shadow: 0 0px 12px rgba(0, 0, 0, 0.12);
        border-radius: 5px;
        h3 {
            border-bottom: 1px solid #ccc;
            padding: 20px 20px 5px 20px;
        }
        .input-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 16px; /* 调整间距 */
            padding: 20px;
        }
    }
}
.el-select {
    display: block;
}
.item-container {
    padding: 5px 10px;
    margin-bottom: 10px;
    border-radius: 5px;
}

.item-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.create-by {
    font-weight: bold;
    color: #333;
}

.info {
    flex: 1;
    margin-left: 10px;
    color: #555;
}

.create-time {
    color: #999;
    font-size: 0.9em;
}
</style>
